<template>
	<view class="">
			<view class="cai-modal">
				<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
					<view class="cu-dialog">
						<view class="padding-xl">
							<view :style="{fontSize: titleFontSize+'rpx'}">
								{{ title }}
							</view>
							<view class="sub-title">
								{{ subtitle }}
							</view>
							<view class="modal-content">
								<picker-view v-if="visible" :indicator-style="indicatorStyle" indicator-class="modal-indicator" :value="value" @change="bindChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
									</picker-view-column>
									<picker-view-column>
										<view class="item" v-for="(item,index) in months" :key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column>
										<view class="item" v-for="(item,index) in days" :key="index">{{item.name}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
						<view class="cu-bar bg-white" :class="{onlyDefine:onlyDefine}">
							<button class="action action-cancel cai-font-bold" @tap="hideModal" v-if="!onlyDefine">
								{{ cancelText }}
							</button>
							<button class="action action-define cai-font-bold cai-color-bg" @tap="defineModal">
								{{ defineText }}
							</button>
						</view>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			eventMask: {
				type: String,
				default: ''
			},
			title: {
			  type: String,
			  default: '是否确认？'
			},
			titleFontSize: {
				type: String,
				default: '38'
			},
			subtitle: {
				type: String,
				default: ''
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			defineText: {
				type: String,
				default: '确认'
			},
			isTabbar: {
				type: Boolean,
				default: false
			},
			onlyDefine: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				modalName: null,
				showModalStatus: false,
				value: [9999, 0, 1],
				visible: true,
				indicatorStyle: `height: 55px;`,
				years: [],
				months: [],
				days: [],
				fullYear: 0,
				fullMonths: 0,
				fullDays: 0,
				currentYear: '',
				currentMonths: '',
				currentDays: '',
				changeVal: [0, 0, 1],
			}
		},
		mounted() {
			var date = new Date();
			this.fullYear = date.getFullYear();
			this.fullMonths = date.getMonth() + 1;
			this.fullDays = date.getDay();
			// 年份
			var yearNum = 0;
			for (var i = 2018; i <= this.fullYear; i++) {
				this.years.push(i)
				yearNum++;
			}
			this.$set(this.changeVal, 0, yearNum-1);
			this.getFullJDAndMonths(this.fullMonths, 'default');
			this.getFullJDAndDays(this.fullDays, 'default');
			this.defineModal();
		},
		computed: {
			isTabbar2() {
				return this.isTabbar
			}
		},
		methods:{
			getFullJDAndMonths(fullMonths) {
				this.months = [];
				// 月
				for (let i = 1; i <= fullMonths; i++) {
					this.months.push({
						name: i+'月',
						key: i
					})
				}
			},
			getFullJDAndDays(fullDays) {
				this.days = [];
				// 月
				for (let i = 1; i <= fullDays; i++) {
					this.days.push({
						name: i+'日',
						key: i
					})
				}
			},
			bindChange: function (e) {
				const val = e.detail.value;
				this.changeVal = val;
				if(this.years[val[0]] == this.fullYear){
					this.getFullJDAndMonths(this.fullMonths);
					this.getFullJDAndDays(this.fullDays);
				}else{
					this.getFullJDAndMonths(12);
					this.getFullJDAndDays(31);
				}
			},
			showModal(e) {
				this.modalName = 'bottomModal';
				this.showModalStatus = true;
			},
			hideModal(e) {
				this.modalName = null
				this.showModalStatus = false;
			},
			defineModal() {
				let val = this.changeVal;
				this.currentYear = this.years[val[0]];
				this.currentMonths = this.months[val[1]];
				this.currentDays = this.days[val[2]];
				this.$emit('getFullYear', this.currentYear);
				this.$emit('getFullMonths', this.currentMonths);
				this.$emit('getFullDays', this.currentDays);
				this.$emit('clickDefine', '')
			}
		}
	}
</script>

<style lang="scss">
	/deep/.uni-picker-view-indicator.modal-indicator{
		&:after, &:before{
			height: 0 !important;
			border: none !important;
		}
	}
    .picker-view {
        width: 630rpx;
        height: 340rpx;
        margin-top: 20rpx;
    }
    .item {
        height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
.cai-modal{
	.cu-modal{
		.padding-xl{
			text-align: left;
			line-height: 64rpx;
		}
	}
}
.onlyDefine{
	.action-define{
		width: 100%;
	}
}
.action-define{
	background-color: ($cor);
}
.sub-title{
	color: #666;
	font-size: 22rpx;
	font-weight: 400;
	margin-top: -10rpx;
}
</style>
